<template>
  <div class="cateDialog">
    <el-dialog :title="title" :visible.sync="dialogStatus" :before-close="handleClose">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="category.name"></el-input>
        </el-form-item>
        <el-form-item label="广告">
          <el-button @click="add">添加广告</el-button>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="12" v-for="(item,index) in category.items" :key="index">
              <el-form label-width="120px">
                <el-form-item label="图片(URL)">
                  <el-upload
                    class="avatar-uploader"
                    :action="$http.defaults.baseURL+'upload'"
                    :show-file-list="false"
                    :on-success="(res)=>{handleAvatarSuccess(res,index)}"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="item.imageUrl" :src="item.imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="广告地址">
                  <el-input v-model="item.adUrl"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="danger" style="marginTop:10px" @click="remove(index)">删除</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["dialogVisible", "title", "dialogId", "parents"],
  data() {
    return {
      category: {
        name: "",
        items: [
          // {
          //   imageUrl: '',
          //   adUrl: '',
          //   desc: ''
          // }
        ]
      }
    };
  },
  methods: {
    handleClose() {
      this.category.name = "";
      this.category.items = [];
      this.$emit("close", false);
    },
    async save() { //设置广告
      if (this.dialogId) { //修改
        await this.$http.put("rest/ads/" + this.dialogId, this.category);
      } else { //新增
        await this.$http.post("rest/ads", this.category);
      }
      this.handleClose();
      this.$emit("getCategory");
    },
    async getCateById(id) { //通过id获取广告信息
      const res = await this.$http.get("rest/ads/" + id);
      this.category = res.data;
      this.$forceUpdate();
    },
    handleAvatarSuccess(res, index) { //上传成功回显
      this.category.items[index].imageUrl = res.url;
    },
    beforeAvatarUpload(file) { //上传前检验
      const isJPG = file.type.includes('image');
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("封面必须是图片格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    add() { //添加广告
      let obj = {
        imageUrl: '',
        adUrl: '',
        desc: ''
      }
      this.category.items.push(obj)
    },
    remove(index) { //删除广告
      this.category.items.splice(index,1)
    }
  },
  watch: {
    dialogStatus(val) {
      val && this.dialogId && this.getCateById(this.dialogId);
    }
  },
  computed: {
    dialogStatus() {
      return this.dialogVisible;
    }
  }
};
</script>
<style lang='scss' scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>